<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
//接收父组件数据
const list=defineProps({
	parentData:Array
})
// 响应式数据
const chartData = ref({});
const opts = {
  color: ["#EE6666"],
  padding: [15,15,0,5],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [
      {
        min: 0
      }
    ]
  },
  extra: {
    column: {
      type: "group",
      width: 30,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08
    }
  }
};

// 生命周期钩子
onMounted(() => {
  getServerData();
});

// 数据获取方法
const getServerData = () => {
  setTimeout(() => {
    const res = {
	  categories: ["周一","周二","周三","周四","周五","周六","周日"],
      series: [
        {
          name: "一周心率折现",
          // data: list.parentData
		  data:[60,0,0,0,0,0,0]
        }
      ]
    };
    chartData.value = res;
  }, 500);
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height:250px;
}
</style>